<script setup>
import {computed, onMounted, ref} from "vue";
import {doDelete, doGet} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
// 引入路由
const router = useRouter()
// 获取用户信息 vuex 获取用户
const store = useStore();
const loginUser = computed(() => store.state.loginUser);
onMounted(() => {
  store.dispatch('fetchUserInfo');
});
// 创交易据对象集合
const tranList = ref([])
// 创建分页对象
const pageInfo = ref({})
const loadData = (current)=>{

  doGet("/api/tran/page",{current:current}).then(resp=>{
    if (resp.data.code === 200){
      console.log(resp.data.data.list)
      tranList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total;
    }else {
      showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
    }
  })
}
const toEdit = (id)=>{
  router.push('/index/tran/details/'+id)
}
const toDel = (id)=>{
  confirmMessage('您确认要删除吗？').then(()=>{
    doDelete("/api/tran/"+id).then(resp=>{
      if (resp.data.code === 200){
        showMessage("删除成功","success")
        loadData(1)
      }else {
        showMessage("删除失败，请稍后重试"+resp.data.msg,"error")
      }
    })
  })


}

onMounted(()=>{
  loadData(1)
})
</script>

<template>
  <el-button type="primary" @click="router.push('/index/tran/add')">添加交易记录</el-button>
  <el-table
      :data="tranList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55"/>
    <el-table-column label="序号" type="index" width="80"/>
    <el-table-column label="流水号" property="tranNo" width="100"/>
    <el-table-column label="客户名字" property="tranName" width="150"/>
    <el-table-column label="交易额" width="80" property="money"/>
    <el-table-column label="交易日期" width="120" property="expectedDate"/>
    <el-table-column label="创建时间" width="120" property="createTime"/>
    <el-table-column label="下次联系时间" width="120" property="nextContactTime"/>
    <el-table-column label="创建人" width="120" property="createName"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="toEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)" v-if="loginUser.id===1">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>

</template>

<style scoped>

</style>